<template>
    <div class="box">
        <h3>axios的集成和使用</h3>
        <ol>
            <li>安装axios三方模块：npm install axios --save|-S</li>
            <li>在需要使用的位置以 axios 模块的导入方式完成模块加载</li>
            <li>在异步请求代码中通过 axios 结合 axios 语法规范完成 异步请求操作</li>
        </ol>
        <pre>{{ result }}</pre>
        <hr>
        <p>{{ result.state }}</p>
        <p>{{ result.msg }}</p>
        <pre>{{ result.data }}</pre>
        <input type="button" value="加载服务器数据" @click="loadServeData1()">
        <input type="button" value="加载服务器数据" @click="loadServeData2()">
    </div>
</template>

<script>
import axios from "axios";
// console.log("axios:",axios)
export default {
    data() {
        return {
            result: {}
        }
    },
    methods: {
        loadServeData1() {
            axios.get("http://127.0.0.1:3000/public/types")
                .then((response) => {
                    this.result = response.data
                })
                .catch((error) => {
                    if (error.code == "ERR_NETWORK") {
                        alert("网络中断了");
                    } else {
                        switch (error.response.status) {
                            case 404:
                                alert("资源不存在");
                                break;
                            case 500:
                                alert("服务器运行异常");
                                break;
                            default:
                                alert("数据请求失败了");
                                break;
                        }
                    }
                })
        },
        async loadServeData2() {
            try {
                let response = await axios.get("http://127.0.0.1:3000/public/types");
                this.result = response.data;
            } catch (error) {
                if (error.code == "ERR_NETWORK") {
                    alert("网络中断了");
                } else {
                    switch (error.response.status) {
                        case 404:
                            alert("资源不存在");
                            break;
                        case 500:
                            alert("服务器运行异常");
                            break;
                        default:
                            alert("数据请求失败了");
                            break;
                    }
                }
            }
        }
    },
    created () {
        // this.loadServeData2();
    },
}
</script>

<style lang="scss" scoped>

</style>